<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	    <title>流量统计</title>
	    <script src="echarts.min.js"></script>
	    <script src="dark.js"></script>
	    <link rel="stylesheet" href="bootstrap.min.css">  
		<script src="jquery.min.js"></script>
		<script src="bootstrap.min.js"></script>
		
		
	    <link href="datatables.min.css" rel="stylesheet" type="text/css" />
	    <link href="datatables.bootstrap.css" rel="stylesheet" type="text/css" />
	    <link href="components.css" rel="stylesheet" id="style_components" type="text/css" />
	    <link href="plugins.min.css" rel="stylesheet" type="text/css" />
		<script src="jquery.min.js" type="text/javascript"></script>
	    <script src="datatables.min.js" type="text/javascript"></script>
	    <script src="datatables.bootstrap.js" type="text/javascript"></script>
        <!--添加全局申请ip-->
    <script src="../gobal_ip/gobal_ip.js" type="text/javascript"></script>
	    <!--<script src="table-datatables-colreorder.min.js" type="text/javascript"></script>-->
		<title></title>
	</head>
	<body>
		<div class="container">
			<div class="row clearfix">
				
				<div class="col-md-7 column" >
					<div class="portlet light bordered">
						<div class="portlet-title">流量变化统计</div>
						<div id = "chart1" style="width: 100%; height: 400%;"></div>
			
					</div>
				</div>
				<div class="col-md-5 column">
					<div class="portlet light bordered">
						<div class="portlet-title">
							流量明细表
						</div>
						<div class="portlet-body">
							<table class="table table-striped table-bordered table-hover" id="sample_1">
								<thead>
									<tr>
										<th>时间</th>
										<th>远程IP</th>
										<th>本地IP</th>
										<th>远程端口</th>
										<th>本地端口</th>
										<th>网络层协议</th>
										<th>应用层协议</th>
										<th>连接方向</th>	
										<th>流量</th>
										<th>包数</th>											
									</tr>
								</thead>
								<tbody>
								</tbody>
							</table>
						</div>
					</div>					
				</div>
			</div>
			<!--表格初始化-->
			
			<div class="row">
				<div class="col-md-12">
				<div class="row">
					<div class="portlet lightMe bordered">
						<div class="portlet-title">资产流量态势</div>
					
						<!--
						<div id="chart2" style="width: 1200px; height:600px;"></div>
						-->
						<div class="col-md-2">
						<div class="portlet lightSubMe bordered">
						<div class="portlet-title">流量</div>
							<div id="ll" style="width: 200px; height:200px;">
								<div id="llId_1" style="width: 50%; height:20%;background:#6C6C6C;text-align:center; line-height:30px">流量测试-1</div><br>
								<div id="llId_2" style="width: 50%; height:20%;background:#6C6C6C;text-align:center; line-height:30px">流量测试-2</div><br>
								<div id="llId_3" style="width: 50%; height:20%;background:#6C6C6C;text-align:center; line-height:30px">流量测试-3</div><br>
								<div id="llId_4" style="width: 50%; height:20%;background:#6C6C6C;text-align:center; line-height:30px">流量测试-4</div><br>
								<div id="llId_5" style="width: 50%; height:20%;background:#6C6C6C;text-align:center; line-height:30px">流量测试-5</div>
							</div>
						</div>
						</div>
						<div class="col-md-4">
						<div class="portlet lightSubMe bordered">
						<div class="portlet-title">资产</div>
							<div id="zc" style="width: 400px; height:200px;">
								<div id="zcId_1" style="width: 50%; height:20%;background:#6C6C6C;text-align:center; line-height:30px">资产样例-A</div><br>
								<div id="zcId_2" style="width: 50%; height:20%;background:#6C6C6C;text-align:center; line-height:30px">资产样例-B</div><br>
								<div id="zcId_3" style="width: 50%; height:20%;background:#6C6C6C;text-align:center; line-height:30px">资产样例-C</div><br>
								<div id="zcId_4" style="width: 50%; height:20%;background:#6C6C6C;text-align:center; line-height:30px">资产样例-D</div><br>
								<div id="zcId_5" style="width: 50%; height:20%;background:#6C6C6C;text-align:center; line-height:30px">资产样例-E</div>
							</div>
						</div>
						</div>
						<div class="col-md-3">
						<div class="portlet lightSubMe bordered">
						<div class="portlet-title">资产IP</div>
							<div id="nwip" style="width: 300px; height:200px;">
								<div id="nwId_1" style="width: 50%; height:12%;background:#6C6C6C;text-align:center; line-height:20px">192.168.0.12</div><br>
								<div id="nwId_2" style="width: 50%; height:12%;background:#6C6C6C;text-align:center; line-height:20px">192.168.0.13</div><br>
								<div id="nwId_3" style="width: 50%; height:12%;background:#6C6C6C;text-align:center; line-height:20px">192.168.0.14</div><br>
								<div id="nwId_4" style="width: 50%; height:12%;background:#6C6C6C;text-align:center; line-height:20px">192.168.0.15</div><br>
								<div id="nwId_5" style="width: 50%; height:12%;background:#6C6C6C;text-align:center; line-height:20px">192.168.0.16</div><br>
								<div id="nwId_6" style="width: 50%; height:12%;background:#6C6C6C;text-align:center; line-height:20px">192.168.0.17</div><br>
								<div id="nwId_7" style="width: 50%; height:12%;background:#6C6C6C;text-align:center; line-height:20px">192.168.0.18</div><br>
							</div>
						</div>
						</div>
						<div class="col-md-3">
						<div class="portlet lightSubMe bordered">
						<div class="portlet-title">外部连接IP</div>
							<div id="wbip" style="width: 300px; height:200px;">
								<div id="wbId_1" style="width: 50%; height:10%;background:#6C6C6C;text-align:center; line-height:18px">210.69.36.1</div><br>
								<div id="wbId_2" style="width: 50%; height:10%;background:#6C6C6C;text-align:center; line-height:18px">210.69.36.2</div><br>
								<div id="wbId_3" style="width: 50%; height:10%;background:#6C6C6C;text-align:center; line-height:18px">210.69.36.3</div><br>
								<div id="wbId_4" style="width: 50%; height:10%;background:#6C6C6C;text-align:center; line-height:18px">210.69.36.4</div><br>
								<div id="wbId_5" style="width: 50%; height:10%;background:#6C6C6C;text-align:center; line-height:18px">210.69.36.5</div><br>
								<div id="wbId_6" style="width: 50%; height:10%;background:#6C6C6C;text-align:center; line-height:18px">210.69.36.6</div><br>
								<div id="wbId_7" style="width: 50%; height:10%;background:#6C6C6C;text-align:center; line-height:18px">210.69.36.7</div><br>
								<div id="wbId_8" style="width: 50%; height:10%;background:#6C6C6C;text-align:center; line-height:18px">210.69.36.8</div><br>
							
							</div>
						</div>
						</div>

					</div>
				</div>
				</div>
			</div>
		</div>
		<script>
			$.ajaxSetup({
				async: false
			});
			
				var myChart = echarts.init(document.getElementById('chart1'));
				yyxyData=[];
				llData=[];
				bsData=[];
				/*
				$.ajax({
					url: "time_flow.json",
					async: false,//改为同步方式
					type: "GET",
				//	data: { arg: val },
					success: function (data) {
						$(data.data).each(function(index,item){
							
							yyxyData.push(
								item.yyxy
							);
							llData.push(
								item.ll
							);	
							bsData.push(
								item.bs
							);	
						})
					}
				});
				*/
				var jsonxyObj={timepoint:"2016-12-30",timescope:"day"}; 
				$.get(encodeURI("http://"+global_ip+"/networkassetinfocon/getdataflowstatisticbyprotocol?param="+JSON.stringify(jsonxyObj)),function(data){
					$(data.data).each(function(index,item){
						if(item.yyxy==null)
						;
						else{
							yyxyData.push(
								item.yyxy
							);
							llData.push(
								item.ll
							);	
							bsData.push(
								item.bs
							);	
						}
					})
				});
				
				sjData=[];
				udpData=[];
				tcpData=[];
				tcptotal=[];
				udptotal=[];
				/*
				$.ajax({
					url: "llbhdata.json",
					async: false,//改为同步方式
					type: "GET",
				//	data: { arg: val },
					success: function (data) {
						$(data.data).each(function(index,item){
							sjData.push(
								item.sj
							);		
							udpData.push(
								item.UDP
							);	
							tcpData.push(
								item.TCP
							);
							udptotal.push(
								item.UDPTotal
							);	
							tcptotal.push(
								item.TCPTotal
							);	
						})
					}
				});	
				*/
				var jsonipObj={starttime:"2016-12-24 00:00:00",endtime:"2016-12-30 00:00:00"}; 
				$.get(encodeURI("http://"+global_ip+"/networkassetinfocon/getudptcpstatistic?param="+JSON.stringify(jsonipObj)),function(data){
					$(data.data).each(function(index,item){
						sjData.push(
							item.sj
						);		
						udpData.push(
							item.udp
						);	
						tcpData.push(
							item.tcp
						);
						udptotal.push(
							item.udptotal
						);	
						tcptotal.push(
							item.tcptotal
						);	
					})
				});
				
				option = {
				    baseOption: {
				        timeline: {
				            // y: 0,
				            axisType: 'category',
				            // realtime: false,
				            // loop: false,
				            autoPlay: true,
//				            bottom:0,
				            top:'bottom',
				            // currentIndex: 2,
				            playInterval: 2000,
				            data:sjData,
				        },
//				         title: {
//				             text: '应用层协议分类计数',
//				             x:'75%',
//				             y:'50'
//				         },
				        tooltip: {
//					        trigger: 'axis',
//					        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
//					            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
//					        }				        	
				        },
				        legend: {
				            x: 'center',
				            data: ['TCP', 'UDP'],
				        },
				        calculable : false,
				        grid: [{
				            top: 50,
				            width: '75%',
				            bottom:'18%',
				            left: '5%',
//				            containLabel: true
				        },{
				            top: '55%',
				            width: '15%',
				            left: '85%',
				            bottom:'25%'
//				            containLabel: true				        	
				        }],
				        xAxis: [
				            {
				                type:'category',
//				                axisLabel:{'interval':1},
				                data:['0:00','1:00','2:00','3:00','4:00','5:00','6:00','7:00','8:00','9:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00'],
				            },{
				            	data:yyxyData,
				            	gridIndex: 1
				            }
				        ],
				        yAxis: [
				            {
				                type: 'value',
//				                name: '流量',
				            },{
				            	gridIndex: 1,
				            	type: 'value',
				            }
				        ],
				        series: [
					        {
					            name: 'TCP',
					            type: 'bar',
					            stack: '总量',
//					            barWidth:'50%',
					            label: {
					                normal: {
					                    show: true,
					                    position: 'insideRight'
					                }
					            },
//					            data: udpData[0],
					        },
					        {
					            name: 'UDP',
					            type: 'bar',
//					            barWidth:'50%',
					            stack: '总量',
					            label: {
					                normal: {
					                    show: true,
					                    position: 'insideRight'
					                }
					            },
//					            data: tcpData[0]
							},
				            {
				                name: '流量占比',
				                type: 'pie',
				                center: ['90%', '25%'],
				                radius: '30%',
								labelLine: {
					                normal: {
					                    show: false
					                }
            					},
				            },
				            {
				            	type:'bar',
				            	xAxisIndex: 1,
        						yAxisIndex: 1,
        						data:llData,
				            },
				            {
				            	type:'bar',
				            	xAxisIndex: 1,
        						yAxisIndex: 1,
        						data:bsData,
				            }
				        ]
				    },
				    options:[
				    	{
				    		series:[
				    		{data:udpData[0]},
				    		{data:tcpData[0]},
				    		{data:[
				    			{name:'TCP',value:tcptotal[0]},
				    			{name:'UDP',value:udptotal[0]}
				    		]}
				    		]
				    	},
				    	{
				    		series:[
				    		{data:udpData[1]},
				    		{data:tcpData[1]},
				    		{data:[
				    			{name:'TCP',value:tcptotal[1]},
				    			{name:'UDP',value:udptotal[1]}
				    		]}
				    		]
				    	},
				    	{
				    		series:[
				    		{data:udpData[2]},
				    		{data:tcpData[2]},
				    		{data:[
				    			{name:'TCP',value:tcptotal[2]},
				    			{name:'UDP',value:udptotal[2]}
				    		]}
				    		]
				    	},
				    	{
				    		series:[
				    		{data:udpData[3]},
				    		{data:tcpData[3]},
				    		{data:[
				    			{name:'TCP',value:tcptotal[3]},
				    			{name:'UDP',value:udptotal[3]}
				    		]}
				    		]
				    	},	
				    	{
				    		series:[
				    		{data:udpData[4]},
				    		{data:tcpData[4]},
				    		{data:[
				    			{name:'TCP',value:tcptotal[4]},
				    			{name:'UDP',value:udptotal[4]}
				    		]}
				    		]
				    	},
				    	{
				    		series:[
				    		{data:udpData[5]},
				    		{data:tcpData[5]},
				    		{data:[
				    			{name:'TCP',value:tcptotal[5]},
				    			{name:'UDP',value:udptotal[5]}
				    		]}
				    		]
				    	}
						
				    ]
				};
				myChart.setOption(option);
				
				
				$.getTwoDensionArr=function(dension,len)
					{
						var arr=new Array();
						for(var i=0;i<dension;i++)
						{
							arr[i]=new Array();
							for(var j=0;j<len;j++)
							{
								arr[i][j]="dafault";
							}
						}
						return arr;
					}				
			
				flow_table = $.getTwoDensionArr(1,10);
				$(document).ready(function() {
					$('#sample_1').dataTable({
						"destroy": true,
						"data": "",			
						"pageLength": 2,
						"lengthChange": false,
						"info":false,
						 buttons: [
			                { extend: 'print', className: 'btn dark btn-outline' },
			                { extend: 'pdf', className: 'btn green btn-outline' },
			                { extend: 'csv', className: 'btn purple btn-outline ' }
			            ],
			            //responsive: true,
						colReorder: {
			                reorderCallback: function () {
			                    console.log( 'callback' );
			                }
			            },
			            "order": [
			                [0, 'asc']
			            ],
						"dom": "<'row' <'col-md-12'B>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>"
					});
				});
				myChart.on('mouseover', function (params){
					
					var jsonllObj={timepoint:params.name,timescope:"day"}; 
					$.get(encodeURI("http://"+global_ip+"/networkassetinfocon/getdataflowdetail?param="+JSON.stringify(jsonllObj)),function(data){
							flow_table = $.getTwoDensionArr(data.data.length,10);
							tmp = [];
							$(data.data).each(function(index,items){
								tmp.push(items.sj);
								tmp.push(items.ycip);
								tmp.push(items.bdip);
								tmp.push(items.ycdk);
								tmp.push(items.bddk);
								tmp.push(items.wlxy);
								tmp.push(items.yyxy);
								tmp.push(items.ljfx);	
								tmp.push(items.ll);
								tmp.push(items.bs);								
								flow_table[index]=tmp;
								tmp=[];
							});
					})
					$('#sample_1').dataTable({
						"destroy": true,
						"data": flow_table,			
						"pageLength": 2, 
						"lengthChange": false,
						"info":false,
						buttons: [
							{ extend: 'print', className: 'btn dark btn-outline' },
							{ extend: 'pdf', className: 'btn green btn-outline' },
							{ extend: 'csv', className: 'btn purple btn-outline ' }
						],
					   // responsive: true,
						colReorder: {
							reorderCallback: function () {
								console.log( 'callback' );
							}
						},
						"order": [
							[0, 'asc']
						],
						"dom": "<'row' <'col-md-12'B>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>"
					});
				});
				/*
				$.ajax({
					url: "flow.json",
					async: false,//改为同步方式
					type: "GET",
				//	data: { arg: val },
					success: function (data) {
						flow_table = $.getTwoDensionArr(data.data.length,10);
						tmp = [];
						$(data.data).each(function(index,items){
							tmp.push(items.sj);
							tmp.push(items.ycip);
							tmp.push(items.bdip);
							tmp.push(items.ycdk);
							tmp.push(items.bddk);
							tmp.push(items.wlxy);
							tmp.push(items.yyxy);
							tmp.push(items.ljfx);	
							tmp.push(items.ll);
							tmp.push(items.bs);								
							flow_table[index]=tmp;
							tmp=[];
						});
						
					}
				});	
				*/
			
			$("#llId_1").hover(function(){
				$(this).css("background","yellow");
				$("#zcId_1").css("background","yellow");
				$("#zcId_2").css("background","yellow");
				$("#zcId_5").css("background","yellow");
			},function(){
				$("#ll div").css("background","#6C6C6C");
				$("#zc div").css("background","#6C6C6C");
				$("#nwip div").css("background","#6C6C6C");
				$("#wbip div").css("background","#6C6C6C");
			});
			
			$("#zcId_1").hover(function(){
				$(this).css("background","yellow");
				$("#llId_1").css("background","yellow");
				$("#llId_3").css("background","yellow");
				$("#nwId_3").css("background","yellow");
				$("#nwId_7").css("background","yellow");
			},function(){
				$("#ll div").css("background","#6C6C6C");
				$("#zc div").css("background","#6C6C6C");
				$("#nwip div").css("background","#6C6C6C");
				$("#wbip div").css("background","#6C6C6C");
			});
			
			$("#nwId_1").hover(function(){
				$(this).css("background","yellow");
				$("#zcId_1").css("background","yellow");
				$("#zcId_4").css("background","yellow");
				$("#wbId_3").css("background","yellow");
				$("#wbId_5").css("background","yellow");
				$("#wbId_7").css("background","yellow");
				$("#wbId_8").css("background","yellow");
			},function(){
				$("#ll div").css("background","#6C6C6C");
				$("#zc div").css("background","#6C6C6C");
				$("#nwip div").css("background","#6C6C6C");
				$("#wbip div").css("background","#6C6C6C");
			});
			
			$("#wbId_1").hover(function(){
				$(this).css("background","yellow");
				$("#nwId_2").css("background","yellow");
				$("#nwId_4").css("background","yellow");
				$("#nwId_6").css("background","yellow");
			},function(){
				$("#ll div").css("background","#6C6C6C");
				$("#zc div").css("background","#6C6C6C");
				$("#nwip div").css("background","#6C6C6C");
				$("#wbip div").css("background","#6C6C6C");
			});
		</script>
	</body>
</html>
